<template>
    <view class="container">
        <view class="user">
            <!-- #ifdef MP-WEIXIN -->
                <view class="left">
                    <!-- 如果能获取存储的登录信息就数据库的昵称 -->
                    <view class="nickname" v-if="business.id">
                        {{business.nickname ? business.nickname : business.mobile_text}}
                    </view>

                    <!-- 如果没有获取到就会显示微信昵称 -->
                    <open-data v-else type="userNickName" class="nickname"></open-data>
                </view>
                <view class="right">
                    <view class="avatar xcx">
                        <u-avatar :src="business.avatar_cdn" size="90" v-if="JSON.stringify(business) !== '{}'"></u-avatar>

                        <!-- 如果没有获取到就会显示微信头像 -->
                        <open-data type="userAvatarUrl" v-else></open-data>
                    </view>
                </view>
            <!-- #endif -->

            <!-- H5 -->
			<!--  #ifdef H5 -->
            <view class="left">
                    <view class="nickname" v-if="JSON.stringify(business) !== '{}'">
                        {{business.nickname}}
                    </view>
                    <view class="nickname" v-else>
                        请选登陆
                    </view>
                    <view class="email" v-if="JSON.stringify(business) !== '{}'">
                        {{business.email}}
                    </view>
                </view>
                <view class="right">
                    <view class="avatar">
                        <u-avatar :src="business.avatar_cdn" size="90" v-if="Object.getOwnPropertyNames(business)['id']"></u-avatar>
                        <u-avatar src="/static/avatar.jpg" size="90" v-else></u-avatar>
                    </view>
                </view>
			<!-- #endif -->
        </view>

        <view class="menu" v-if="JSON.stringify(business) !== '{}'">
            <view class="item" hover-class="checkActive" @click="ToProduct">
                <view class="title">产品防伪管理</view>
                <u-icon name="arrow-right"></u-icon>
            </view>

            <!--  #ifdef MP-WEIXIN -->
            <view class="item" hover-class="checkActive" @click="onUnbinding">
                <view class="title">解除绑定账号</view>
                <u-icon name="arrow-right"></u-icon>
            </view>
            <!-- #endif -->

            <view class="item" hover-class="checkActive" @click="onLogout">
                <view class="title">退出账号</view>
                <u-icon name="arrow-right"></u-icon>
            </view>
        </view>

        <view class="actions">
			<!-- #ifdef MP-WEIXIN -->
			<view class="login" v-if="JSON.stringify(business) === '{}'">
				<u-button type="primary" icon="weixin-circle-fill" @click="onLogin">微信一键登陆</u-button>
			</view>
			<!-- #endif -->

			<!--  #ifdef H5 -->
			<view class="login" v-if="JSON.stringify(business) === '{}'">
				<u-button type="primary" @click="toLogin">登陆帐号</u-button>
			</view>
			<!-- #endif -->
		</view>

        <!-- 信息提示 -->
        <u-toast ref="uToast"></u-toast>

        
        <!-- 模态框 -->
        <u-modal :show="show" :title="title" :content='content' :showCancelButton="true" :closeOnClickOverlay="true" @confirm="onConfirm" @cancel="show = false" @close="show = false"></u-modal>
    </view>
</template>

<script>
export default {
    data() {
        return {
            business:{},
            show:false,
            title:'退出账号',
            content:'是否退出当前账号？',
            action:'logout'
        }
    },
    methods:{
        onLogin()
        {
            this.$refs.uToast.show({
                loading:true,
                type:'loading',
                message:'登录中',
                complete:() =>
                {
                    uni.login({
                        provider:'weixin',// 登录服务提供商
                        success:async (res) =>
                        {
                            // 获取临时登录凭证
                            let code = res.code ? res.code : '';

                            let result = await uni.$u.http.post('/business/login',{code});

                            if(result.code === 1)
                            {

                                this.$refs.uToast.show({
                                    type:'success',
                                    message:result.msg,
                                    complete:() =>
                                    {
                                        this.business = result.data;
                                        uni.setStorageSync('business',result.data);
                                    }
                                })
                                
                            }else{
                                this.$refs.uToast.show({
                                    type:'error',
                                    message:result.msg,
                                    complete:() => {
                                        let openid = result.data ? result.data.openid : '';

                                        if(openid)
                                        {
                                            uni.$u.route('/pages/business/bind',{openid});
                                        }
                                    }
                                })
                            }
                            
                            
                        }
                    })
                }
            })
            
        },
        // #ifndef MP-WEIXIN
        toLogin()
        {
            // H5和APP登录
            this.$u.route('pages/business/login');
        },
        // #endif
        ToProduct()
        {
            this.$u.route('pages/business/product');
        },
        onLogout()
        {
            this.show = true;
            this.title = '退出账号';
            this.content = '是否确认退出当前账号？';
            this.action = 'logout';

        },
        onUnbinding()
        {
            this.show = true;
            this.title = '解除微信绑定';
            this.content = '是否确认解除微信绑定？微信登录就无法使用，可重新绑定';
            this.action = 'unbinding';

        },
        onConfirm()
        {
            // logout unbinding
            let action = this.action;

            // if的另外一种写法 单一的值判断
            switch(action)
            {
                case 'logout':
                    this.logout();
                    break;

                case 'unbinding':
                    this.unbinding();
                    break;

                default:
            }
        },
        logout()
        {
            // 关闭模态框
            this.show = false;

            this.$refs.uToast.show({
                type:'success',
                message:'退出账号成功',
                complete:() =>
                {
                    this.business = {};
                    uni.removeStorageSync('business');
                }
            })
            
        },
        async unbinding()
        {
            this.show = false;

            let params = {
                busid:this.business.id
            }

            let result = await uni.$u.http.post('/business/unbinding',params);

            if(result.code === 1)
            {
                this.$refs.uToast.show({
                    type:'success',
                    message:result.msg,
                    complete:() =>
                    {
                        this.business = {};
                        uni.removeStorageSync('business');
                    }
                })
            }else{
                this.$refs.uToast.show({
                    type:'error',
                    message:result.msg
                })
            }
        }
    },
    onLoad()
    {
        console.log('加载');
        
    },
    onShow()
    {
        this.business = uni.getStorageSync('business') ? uni.getStorageSync('business') : {};
    },
    onReady()
    {
        console.log('6');
        
    }
}
</script>

<style>
page{
    background-color: #eee;
}

.container{
    width: 95%;
    margin: 0 auto;
}

.user{
    display: flex;
    padding: 40px;
    background-color: #fff;
    margin-top: 10px;
    border-radius: 10px;
}

/* #ifdef H5  */
.user {
    align-items: center;
}
/* #endif */

.user .left {
    flex: 3;
}

/* 条件编译 */
/* #ifdef MP-WEIXIN  */
.user .left {
    flex: 3;
    display: flex;
    align-items: center;
    align-content: center;
}
/* #endif */


.user .right {
    flex: 1
}

.user .right .xcx {
    width: 200rpx;
    height: 200rpx;
    border-radius: 100%;
    overflow: hidden;
}

.user .left .nickname {
    font-size: 26px;
    font-weight: bold;
}

.actions {
    display: flex;
    padding: 20px 40rpx;
}

.login {
    flex: 1;
}

.menu{
    background-color: #fff;
    margin-top: 10px;
}

.menu .item{
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #ccc;
    padding: 10px 10px;
    font-size: 14px;
}

.checkActive{
    background-color: rgba(233, 233, 233, 0.5);
}
</style>